<template>
  <div>
    <div class="title">选择区域</div>
    <div class="area-content">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="allCheckedChange" style="padding:5px 10px">全选</el-checkbox>
      <el-checkbox-group v-model="checkedList">
        <el-checkbox class="area-checkbox" v-for="(item, index) in addr" :key="index" :label="item">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
    </div>

    <el-row style="padding:10px 20px;heigh:40px;line-heigh:40px">
      <el-col :span="12">
        <span>分组名称：</span>
        <el-input v-model="areaGroup.name" placeholder="请输入分组名称" size="small" style="width:200px"></el-input>
      </el-col>
      <el-col :span="12">
        <span>状态：</span>
        <el-switch v-model="areaGroup.status" active-color="#13ce66"></el-switch>
      </el-col>
    </el-row>

    <div style="text-align:center;padding:15px 0">
      <el-button size="small" type="primary" @click="submit" style="padding:10px 30px">提 交</el-button>
    </div>
  </div>
</template>

<script>
import { getAddr, addGoodsArea, putGoodsArea } from '@/api/goods'
import addressData from '@/testData/addr'

export default {
  name: 'AddArea',
  props: {
    areaGroup: {
      type: Object,
      required: true,
    },
    isAdd: {
      type: Boolean,
      required: true,
    }
  },
  data() {
    return {
      addr: addressData,

      isIndeterminate: true,
      checkAll: false,

      checkedList: [],

    }
  },
  watch: {
    checkedList(value) {
      var areaStr = '';
      var cityStr = '';
      value.forEach(item => {  
        if(item.city){
          item.city.forEach(cityItem => {
            cityStr += cityItem.code + ',';
            if(cityItem.area){
              cityItem.area.forEach(areaItem => {
                areaStr += areaItem.code + ',';
              })
            }    
          })
        }              
      });

      this.areaGroup.area_codes = (areaStr.substring(areaStr.length-1) === ',') ? areaStr.substring(0,areaStr.length-1) : areaStr;
      this.areaGroup.city_codes = (cityStr.substring(cityStr.length-1) === ',') ? cityStr.substring(0,cityStr.length-1) : cityStr
    },
  },
  mounted() {
    //this.getAddr();//获取地区数据，因为跨域失败暂时屏蔽掉，使用本地数据
    this.setCheckedList();
  },
  methods: {
    setCheckedList() {
      const cityCodeList = this.areaGroup.city_codes.split(',');
      this.addr.forEach(addrItem => {
        if(addrItem.city){
          addrItem.city.some(cityItem => {
            if(cityCodeList.indexOf(cityItem.code) > -1){
              this.checkedList.push(addrItem)
              return true;
            }
          })
        }
      })
    },
    /**
     * 获取地区数据
     * 因为跨域失败，暂时注释掉，使用本地数据
     */
    getAddr() {
      getAddr().then(response => {
        if(response.status ===200 ){
          this.addr = response.data;
          this.setCheckedList();
        }else{
          this.$message.error(response.message);
        }
      })
    },
    allCheckedChange(value) {
      this.checkedList = value ? this.addr : [];
      this.isIndeterminate = false;
    },
    submit() {
      this.areaGroup.status = this.areaGroup.status ? '1' : '2';
      if(this.isAdd){
        addGoodsArea(this.areaGroup).then(response => {
          if(response.status === 200){
            this.$message.success('添加成功');
            this.$emit('success');
          }else{
            this.$message.error(response.message);
          }
        })
      }else{
        const data = { 
          id: this.areaGroup.id, 
          name: this.areaGroup.name, 
          status: this.areaGroup.status, 
          key: this.areaGroup.key, 
          city_codes: this.areaGroup.city_codes, 
          area_codes: this.areaGroup.area_codes 
        }
        putGoodsArea(data).then(response => {
          if(response.status === 200){
            this.$message.success('修改成功');
            this.$emit('success');
          }else{
            this.$message.error(response.message);
          }
        })
      }
      
    }
  },
}
</script>

<style lang="css" scoped>
.title{
  text-align: center;
  font-size: 18px;
  font-weight: 600;
} 
.area-content{
  padding: 10px 0;
}
.area-checkbox{
  width: 150px;
  padding: 5px 10px;
}
</style>